<template>
  <div class="login">
    <div class="login__container">
      <div class="login__title">login</div>
      <div class="login__form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16rem">
            <van-button
              class="shadow"
              round
              color="#ffcd41"
              block
              type="primary"
              native-type="submit"
            >
              提交
            </van-button>
          </div>
        </van-form>
      </div>
      <router-link
        style="
          font-size: 12rem;
          color: var(--shadow-color);
          text-decoration: underline;
        "
        to="/register"
        >to register</router-link
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { showConfirmDialog, showDialog } from "vant";
import { useRouter } from "vue-router";
import "vant/es/dialog/style";
import { ref } from "vue";
import { useTabbarStore } from "@/store";
import { getUserLogin } from "@/api";
const store = useTabbarStore();
const username = ref<string>("");
const router = useRouter();
const password = ref("");
const onSubmit = async () => {
  const data = (await getUserLogin({
    username: username.value,
    password: password.value,
  })) as any;
  if (data.data) {
    showDialog({
      title: "登录成功",
      message: "欢迎回来",
      confirmButtonColor: "#ffcd41",
    }).then(() => {
      store.active = 0;
      store.hide = true;
      localStorage.setItem("FRUIT_TOKEN", data.data.token);
      localStorage.setItem("token", username.value);
      localStorage.setItem("userInfo", JSON.stringify(data.data));
      router.push("/home");
    });
  } else {
    showConfirmDialog({
      title: "登陆失败",
      message: data.msg,
      confirmButtonColor: "#ffcd41",
    })
      .then(() => {
        // on confirm
        if (data.code === 2001) router.push("/register");
      })
      .catch(() => {
        // on cancel
      });
  }
};
</script>

<style lang="scss">
.login {
  font-size: 16rem;
  height: 100vh;
  @include flex(column, center, center);
  background-color: var(--background-color);
  color: var(--font-color);

  &__container {
    @include flex(column, center, center);
    width: 80%;
    padding: 40rem 10rem;
    border-radius: 20rem;

    .van-cell,
    .van-field__label,
    .van-field__control {
      background-color: var(--background-color);
      color: var(--shadow-color);
    }
  }

  .shadow {
    border: 1px solid var(--shadow-color) !important;
  }

  .shadow:active {
    border: none;
    box-shadow: 1px 1px var(--shadow-color), -1px -1px var(--shadow-color);
  }

  &__title {
    text-shadow: 2px 2px var(--shadow-color), -2px -2px var(--shadow-color);
    font-size: 64rem;
    font-weight: bold;
    margin-bottom: 32rem;
    color: $color-yellow;
  }
}
</style>
